<script lang="ts">
	import { onMount, onDestroy } from 'svelte';
	import { getGlobalHighlighter, type SupportedTheme } from '$lib/utils/shiki/shiki-global';
	import type { Highlighter } from 'shiki';
	import { currentTheme } from '$lib/stores/theme';
	import Table from '$lib/components/Data/Table/Table.svelte';
    import TableColumn from '$lib/components/Data/Table/TableColumn.svelte';
    import IconLibrary from '$lib/components/Basic/Icon/IconLibrary.svelte';

	const code = `<script lang="ts">
    import Icon from '$lib/components/Basic/Icon/Icon.svelte';
<\/script>

<Icon src={图标路径} size={图标大小} color="图标颜色"></Icon>`;
	let formatCode: string = $state('');
	let highlighter: Awaited<Highlighter> | null = $state(null);
	let unsubscribeTheme: (() => void) | null = null;
	let theme: SupportedTheme = $state('github-light');
	let highlightedCode: string = $state('');

	onMount(async () => {
		formatCode = code.replaceAll('\t', '    ');
		highlighter = await getGlobalHighlighter();
		unsubscribeTheme = currentTheme.subscribe((value) => {
			theme = value === 'light' ? 'github-light' : 'github-dark';
		});
	});
	onDestroy(() => {
		if (unsubscribeTheme) unsubscribeTheme();
	});

	$effect(() => {
		if (!highlighter || !formatCode) return;
		// 内部定义异步函数并立即执行，不影响 $effect 返回值
		// 用当前主题重新生成高亮HTML
		highlightedCode = highlighter.codeToHtml(formatCode, {
			lang: 'typescript',
			theme: theme, // 使用最新的theme变量
			defaultColor: false
		});
	});
	const attributesData = [
		{ id: 1, name: 'src', describe: '图标路径，例如 interface/palette', type: 'string', defaulValue: '' },
        { id: 2, name: 'size', describe: '尺寸', type: 'number | string', defaulValue: '继承父对象font-size大小' },
        { id: 3, name: 'color', describe: '颜色', type: 'string', defaulValue: '继承父对象color颜色' },
        { id: 4, name: '$$props', describe: '可传入其余所有Svelte属性，例如 fill="颜色 "', type: 'SvelteAllProps', defaulValue: '' },        
	];
</script>

<div class="component-container">
	<div class="title">
		<div class="name">Icon 图标</div>
		<div class="describe">项目提供了一套常用的图标集合。</div>
	</div>
	<div class="subtitle">
		<div class="name">Icon 使用</div>
		<div class="describe">
			当&nbsp;&nbsp;<span class="tag">size</span>&nbsp;
			<span class="tag">color</span>&nbsp;&nbsp;未定义时，继承
			<span class="keyword">父对象字体的颜色和大小。</span>
		</div>
		<div class="code-area">
			<pre class="hight-code"><code>{@html highlightedCode}</code></pre>
		</div>
	</div>
    <div class="subtitle">
		<div class="name">Icon 集合</div>
	</div>
    <IconLibrary></IconLibrary>
	<div class="subtitle">
		<div class="name">Icon Attributes</div>
	</div>
	<Table data={attributesData} border={false} size="lg">
		<TableColumn key="name" title="属性名" align="left" minWidth={100} />
		<TableColumn key="describe" title="说明" align="left" minWidth={300} />
		<TableColumn key="type" title="类型" align="left" minWidth={300}>
			{#snippet cell(scope)}
				{#if Array.isArray(scope.row.type)}
					<span style="display:inline-flex; gap: 10px; flex-wrap: wrap;">
						{#each scope.row.type as item}
							<span class="tag">{item}</span>
						{/each}
					</span>
				{:else}
					<span>{scope.row.type}</span>
				{/if}
			{/snippet}
		</TableColumn>
		<TableColumn key="defaulValue" title="默认值" align="left" minWidth={150} />
	</Table>
</div>
